<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="" v-if="leftList.length > 0 || rightHeight.length > 0">
			<!-- <view class="item" v-for="(item,index) in collectionUserData" :key="index" @click="goDetails(item.marriage_seeking_id)">
				<view class="item-img">
					<image  :src="item.avatar" mode=""></image>
				</view>
				<view class="item-tit">
					<view class="item-tit-name">
						{{ item.name }}
					</view>
					<view class="item-tit-icon">
						<image :src="imgUrl + 'static/web/icon/icon_renzheng.png'" mode=""></image>
					</view>
				</view>
				<view class="item-info">
					{{ item.age }}岁·{{ item.height }}cm·{{ item.city }}
				</view>
				<view class="item-col" @click.stop="collection(item)">
					<view class="item-col-left">
						<image :src="imgUrl + 'static/web/icon/icon_xin.png'" mode=""></image>
					</view>
					<view class="item-col-right">
						<view class="" style="color: #FF87C9;">取消收藏</view>
					</view>
				</view>
			</view> -->
			<!-- 瀑布流 -->
			<view class="waterfall-box h-flex-x h-flex-2">
				<view>
					<helang-waterfall 
						v-for="(item,index) in leftList" 
						:key="index" 
						:params="item" 
						tag="left"
						:index="index"
						@height="onHeight"
						@click="onClick"
						@collection="collection"
					></helang-waterfall>
				</view>
				<view>
					<helang-waterfall 
						v-for="(item,index) in rightList" 
						:key="index" 
						:params="item" 
						@height="onHeight"
						@click="onClick"
						tag="right"
						:index="index"
						@collection="collection"
					></helang-waterfall>
				</view>
			</view>
			<view class="load-txt">{{ajax.loadTxt}}</view>
		</view>
		<view class="" style="margin-top: 200rpx;" v-else>
			<u-empty
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
					text=" "
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import helangWaterfall from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall.vue"
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				uid: '', //用户id
				collectionUserData: [], // 存储收藏的用户信息
				// 图片瀑布流
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					limit:20,
					// 页码
					page:1,
				},
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 获取我收藏的用户
			// getCollectionUserData(){
			// 	var that = this
			// 	if(!that.uid){
			// 		uni.showToast({
			// 		    title: '请前往授权登录',
			// 			icon: 'none',
			// 		    duration: 1000
			// 		});
			// 		setTimeout(function() {
			// 			uni.switchTab({
			// 				url: '/pages/my/my'
			// 			});
			// 		}, 1000);
			// 	}else{
			// 		that.$http.get('api/ZhCollection/index').then(res=> {
			// 			if(res){
			// 				that.collectionUserData = res.list
			// 			}
			// 		})
			// 	}
			// },
			// 触底触发
			onReachBottom() {
				this.getList();
			},
			// 下拉刷新
			onPullDownRefresh(){
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				setTimeout(()=>{
					this.ajax.page = 1;
					this.leftHeight = 0;
					this.rightHeight = 0;
					this.ajax.load = true;
					this.leftList = []
					this.rightList = []
					this.getList();
				},800);
			},
			// 刷新
			shuaxin(){
				this.ajax.page = 1;
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.ajax.load = true;
				this.leftList = []
				this.rightList = []
				this.getList();
			},
			// 取消收藏
			collection(i){
				console.log(i)
				var that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else{
					that.$http.post('api/ZhCollection/clickCollection',{
						'marriage_seeking_id': i.marriage_seeking_id,
						'release_id': i.release_id
					}).then(res=> {
						uni.showToast({
							title: '取消成功',
							icon:'none'
						})
						// uni.$emit('updateData',{})
						that.ajax.page = 1;
						that.leftHeight = 0;
						that.rightHeight = 0;
						that.ajax.load = true;
						that.leftList = []
						that.rightList = []
						that.getList();
					})
				}
			},
			// 图片瀑布流
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index){
				uni.navigateTo({
					url: '/pages/home/matchmaker_user_detail/matchmaker_user_detail?authentication_id=' + index.authentication_id
				})
			},
			// 获取数据
			getList() {
				var that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
						icon: 'none',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else{
					that.$http.get('api/ZhCollection/index').then(res=> {
						if(res){
							that.addList(res.list)
						}
					})
				}
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				
				if(!res || res.length < 1){
					this.ajax.loadTxt = '没有更多了';
					return;
				}
			
				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;
								
				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;
				
				let [left, right] = [
					[],
					[]
				];
				
				
				// 获取插入的方向
				let getDirection = (index)=>{
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if(differ>= 600 && index < 3){
						differVal = 1;
						return 'right';
					}
					
					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if(differ <= -600 && index < 3){
						differVal = -1;
						return 'left';
					}
					
					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if(differ >= 350 && index < 2){
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if(differ <= -350 && index < 2){
						differVal = -1;
						return 'left';
					}
					
					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i+differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}
				
				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if(getDirection(index) == 'left'){
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					}else{
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});
				// 将左右列表的数据插入，第一页时则覆盖
				if(this.ajax.page == 1){
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				}else{
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}
			
				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			},
			// 前往详情页
			goDetails(index){
				uni.navigateTo({
					url: '/pages/home/matchmaker_user_detail/matchmaker_user_detail?authentication_id=' + index
				})
			},
		},
		onShow() {
			
		},
		//页面卸载
		onUnload() {
			// uni.$emit('refresh')
		},
		onLoad() {
			// 检测授权
			this.judgeLogin(()=>{
				var userInfo = this.$store.state.userInfo;
				this.uid = userInfo.uid;
				// this.getCollectionUserData()
				this.leftHeight = 0
				this.rightHeight = 0
				this.ajax.page = 1;
				this.leftList = []
				this.rightList = []
				this.getList();
			});
		},
		components: {
			"helang-waterfall": helangWaterfall
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.waterfall-box {
		padding: 20rpx 10rpx;
		box-sizing: border-box;
	
		>view {
			padding: 0 10rpx;
		}
	}
	
	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	
		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}
	
	.load-txt{
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
.main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 30rpx 30rpx 0;
	.item {
		width: 330rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		.item-img {
			width: 282rpx;
			height: 293rpx;
			border-radius: 24rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-tit {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #000013;
			line-height: 45rpx;
			margin-top: 18rpx;
			.item-tit-icon {
				width: 28rpx;
				height: 32rpx;
				margin-left: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.item-info {
			font-size: 26rpx;
			font-weight: 500;
			color: #BEC6D3;
			line-height: 37rpx;
			margin-top: 18rpx;
		}
		.item-col {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.item-col-left {
				width: 33rpx;
				height: 30rpx;
				margin-right: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item-col-right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
			}
		}
	}
}

</style>
